<template>
    <div class="addressmanage">
        <div class="addressbox" ref="box">
            <div class="addresslist" v-for="(item,index) in addresslist" :key="index" ref="addresslist" v-if="addresslist.length!=0">
                <div class="click" @click="adlist(item)">
                    <div class="clickcon">
                        <p class="phone">
                            <span class="contact">{{item.contact | sliceString(9)}}</span>
                            <span>{{item.phone}}</span>
                        </p>
                        <p class="border">{{item.address | sliceString(16)}}</p>
                    </div>
                    <div class="clickb">
                        <img src="../../assets/icon_click.png@2x.png" alt="">
                    </div>
                </div>
                <div class="icon">
                    <p v-if="item.isDefault==1"><img src="../../assets/addressadministration_icon_check_normal.png@2x.png" alt="">默认地址</p>
                    <p v-if="item.isDefault==0" class="select"><img src="../../assets/addressadministration_icon_check_selected.png@2x.png" alt="">默认地址</p>
                    <p>
                        <span class="m" @click="addersseditor(item)"><img src="../../assets/addressadministration_icon_compile.png@2x.png" alt="" class="imgb">编辑</span>
                        <span @click="deleteadress(item)"><img src="../../assets/addressadministration_icon_delete.png@2x.png" alt="" class="imgb">删除</span>
                    </p>
                </div>
            </div>

            <div class="buttonbox fixed" ref="buttonbox" @click="addressvue">
                添加新地址
            </div>
            <div style="width:100%;height:50px;background-color:#f1f2f3;"></div>
        </div>
        <div class="nodata" v-if="addresslist.length==0">暂无数据</div>
    </div>
</template>
<script>
import { MessageBox } from "mint-ui";
import { getAddressList, deleteAddressById } from "src/methods/request.js";
export default {
    data() {
        return {
            route: {},
            addresslist: []
        };
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            // from.name == "userSetting" && vm.getAddress();
        });
    },
    created() {
        this.route = Object.assign({}, this.$route);
        this.$store.commit("increment", "管理收货地址");
        this.getaddress();
    },
    mounted() {},
    methods: {
        adlist(item) {
            this.$store.commit('addCateId',item.id)
            this.$router.go(-1)
            // this.$router.push({
            //     path: "/shopResult",
            //     query: {
            //         id: item.id,
            //     }
            // });
        },
        addressvue() {
            this.$router.push({
                path: "/Address",
                query: {}
            });
        },
        //获取
        getaddress() {
            this.$vux.loading.show({ text: "Loading" });
            getAddressList({})
                .then(response => {
                    this.$vux.loading.hide();
                    let arr = Object.assign([], response.data.addressList);
                    this.addresslist = Object.assign(
                        [],
                        response.data.addressList
                    );
                    if (this.addresslist.length > 3) {
                        this.$refs.buttonbox.setAttribute("class", "buttonbox");
                    } else {
                        this.$refs.buttonbox.setAttribute(
                            "class",
                            "buttonbox fixed"
                        );
                    }
                })
                .catch(error => console.log(error));
        },
        // 删除
        deleteadress(item) {
            var self = this;
            MessageBox.confirm("", {
                message: "确定删除？"
            }).then(action => {
                if (action == "confirm") {
                    //点击确认删除
                    deleteAddressById({ id: item.id })
                        .then(response => {
                            console.log();
                            if (response.rspCode == "0000") {
                                this.getaddress();
                            } else {
                                MessageBox("", "删除失败");
                            }
                        })
                        .catch(error => console.log(error));
                }
            });
        },
        //编辑
        addersseditor(item) {
            this.$router.push({
                path: "/Addresseditor",
                query: {
                    id: item.id
                }
            });
        }
    },
    watch: {
        route() {
            if (this.route.path == "/AddressManage") {
                this.getaddress();
            }
        }
    }
};
</script>
<style lang="less" scoped>
.addressmanage {
    font-size: 17px;
    position: absolute;
    box-sizing: border-box;
    top: 0rem;
    bottom: 0rem;
    padding-top: 5rem;
    width: 100%;
    height: 100%;
    background-color: #f1f2f3;
    font-size: 16px;
    .addresslist {
        margin-bottom: 15px;
        background-color: #fff;
        padding: 0 15px 0 15px;
        box-sizing: border-box;
        .click {
            position: relative;
            overflow: hidden;
            height: 100%;
            .clickcon {
                float: left;
                width: 85%;
                //  min-height:80px;
                p {
                    text-align: left;
                }
                .phone {
                    margin-top: 10px;
                    height: 40px;
                    line-height: 40px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .contact {
                        display: inline-block;
                        //   width: 100px;
                        margin-right: 20px;
                    }
                }
                .border {
                    padding-bottom: 10px;
                    line-height: 22px;
                    border-bottom: 1px solid #f1f0f0;
                    word-break: break-all;
                }
            }
            .clickb {
                float: left;
                display: flex;
                justify-content: center;
                width: 15%;
                img {
                    width: 12px;
                    height: 24px;
                    margin-top: -12px;
                    position: absolute;
                    top: 50%;
                }
            }
        }
        .icon {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
            img {
                margin-right: 6px;
            }
            p:nth-child(1) {
                img {
                    margin-top: 1px;
                    width: 18px;
                }
            }
            p:nth-child(2) {
                span {
                    margin-left: 15px;
                }
                img {
                    margin-bottom: -4px;
                    width: 15px;
                }
            }
            p {
                display: flex;
                align-items: center;
                img {
                    width: 18px;
                }
                height: 50px;
            }
        }
    }

    .buttonbox {
        margin-top: 20px;
        margin-left: 4.5%;
        width: 91%;
        color: #fff;
        height: 40px;
        background-color: #ed6e36;
        line-height: 40px;
        border-radius: 5px;
        text-align: center;
        position: fixed;
        bottom: 13px;
    }
    .fixed {
        position: fixed;
        bottom: 10px;
        left: 0px;
    }
}

.MoneyResult::-webkit-scrollbar {
    display: none;
}
</style>

